import { Table, Button,Form, Input,Card, Drawer, Select, DatePicker, message } from  "antd";
import {PageContainer} from "@ant-design/pro-components";
import type { PaginationProps, TableColumnsType} from "antd";
import { useEffect, useState } from "react";
import { getLeavelistAdmin, leaveAgree } from "@/services/ant-design-pro/api";
import dayjs from 'dayjs';
import _ from "lodash";
import { AnyObject } from "antd/es/_util/type";
const FormItem = Form.Item;
const TextArea = Input.TextArea;
const { RangePicker } = DatePicker;
const format = "YYYY-MM-DD HH:mm:ss";
const options = [{label:"事假", value: "0"},{label: "病假",value:"1" },{ label: "年假",value: "2"}];
const Leave:React.FC = () => {
  const [ dataSource ,setDataSource] = useState<Array<any>>([]);
  const [ isShow ,setIsShow] = useState<boolean>(false);
  const [ loading ,setLoading] = useState<boolean>(false);
  const [ drawerData ,setDrawerData] = useState<Info>();
  const [pagination , setPagination] = useState<PaginationProps>({
    pageSize: 10,
    current: 1,
    total: 0
  });
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
 const columns:TableColumnsType = [
    {
    key: "userId",
    dataIndex:"userId",
    title:"工号"
   },
   {
    key: "name",
    dataIndex:"name",
    title:"姓名"
   },
   {
    key: "department",
    dataIndex:"department",
    title:"部门"
   },
   {
    key: "action",
    dataIndex:"action",
    title:"操作",
    render: (value, record) => {
       return <Button onClick={() => handler(record as Info)}>查看</Button>
    }
   },
];
const handler = (record: Info) => {
        const obj:MyObject = {
          ...record,
          rangeTime:[
            dayjs(record.rangeTime[0], format),
            dayjs(record.rangeTime[1], format),
          ]
        }
        form2.setFieldsValue(obj);
        setDrawerData(record);
        setIsShow(true)
}
const onChange = (page:PaginationProps) => {
    const { current , pageSize , pageSizeOptions, total } = page;
    if(current !== pagination.current) {
     // 发送请求
     const params =  form.getFieldsValue();
     loadData(current as number, params);
     setPagination({current,pageSize,total, pageSizeOptions});
    }
    return; 
    
 }
const loadData = (current:number,params?:Params) => {
    setLoading(true);
    getLeavelistAdmin({
        current,
        pageSize: 10,
        ...params
    }).then((res) => {
        console.log(res)
      if (res.success) {
        setDataSource(res.data);
        setLoading(false)
      }
     
    })
}
const onClick = () => {
  queryLoadData();

}
const queryLoadData  =  () => {
  const params = _.omitBy(form.getFieldsValue(),  value => _.isUndefined(value) || _.isNull(value) || value === "");
    loadData(1,params)
}
const onClear = () => {
    form.resetFields();
}
const onApprove = () => {
  leaveAgree({id: drawerData?.id}).then(res => {
    if(res.success) {
     message.success("审批成功");
     setIsShow(false);
     queryLoadData();
    }
  })
}   
useEffect(() => {
    loadData(1);
},[])
 return (
    <PageContainer>
       <Card>
       <Form layout="inline" form={form}>
           <FormItem label="工号" name="userId">
             <Input />
            </FormItem> 
            <FormItem label="姓名" name="name">
             <Input />
            </FormItem> 
            <FormItem label="部门" name="department">
             <Input />
            </FormItem>
            <FormItem>
             <Button type="primary" onClick={onClick}>查询</Button>&nbsp;&nbsp;
             <Button type="primary" onClick={onClear}>清除</Button>
            </FormItem>
      </Form>
       </Card>
       <Table 
        columns={columns}
        dataSource={dataSource || []}
        onChange={onChange}
        pagination={pagination}
        loading={loading}
       />
       <Drawer open={isShow} onClose={() => {setIsShow(false);form2.resetFields();}} width={600}>
        <Form 
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: 600 }} 
        form={form2}
        >
        <FormItem label="请假类型" name="type" rules={[{required: true,message : "请选择请假类型"}]}>
            <Select  disabled options={options} allowClear/> 
        </FormItem>
        <FormItem label="请假时间" name="rangeTime" rules={[{required: true,message :"请选择开始时间"}]}>
            <RangePicker disabled  format="YYYY-MM-DD HH:mm:ss"
            showTime/>
        </FormItem>
        <FormItem label="请假原因" name="reason" rules={[{required: true,message :"请输入请假原因"}]}>
            <TextArea  disabled rows={5} />
        </FormItem>
        <Form.Item style={{display: "flex", justifyContent: "center"}}>
            <Button type="primary" onClick={onApprove}>同意</Button>
        </Form.Item>
        </Form>

       </Drawer>
    </PageContainer>
 );
 }
export default Leave;

export type Params = {
    userId?: number,
    name?:string,
    department?:string
}

type MyObject = {
    rangeTime?: [dayjs.Dayjs, dayjs.Dayjs]; // 使用 dayjs 类型
  }
  type  Info  =  {
    userId: number,
    name: string,
    department: string,
    id: number,
    type: string,
    rangeTime: [
         string,
        string,
    ],
    reason: string
}
  